プロパティ order
orderは、デフォルト0です。特定の要素に1をセットすると、最後に表示されます
例えば、全要素に2をセットしておいてから、特定の要素に1をセットすると、最初に表示されます
この例は、flex-direction row-reverseやcolumn-reverse と同じような動作ですが、
data-attributeとjquery等を使うと複雑なソートも処理できるかもしれません。
HTML
<input type="checkbox" id="sort" value="DESC" />降順 <ul class="menu"> <li class="l1">list 1</li> <li class="l2">list 2</li> <li class="l3">list 3</li> <li class="l4">list 4</li> <li class="l5">list 5</li> <li class="l6">list 6</li> </ul> <div class="menu"> <div class="l1">div 1</div> <div class="l2">div 2</div> <div class="l3">div 3</div> <div class="l4">div 4</div> <div class="l5">div 5</div> <div class="l6">div 6</div> </div>
CSS
.menu{
display:flex;
flex-direction:column;
}
div.menu{
flex-direction:row;
flex-wrap:wrap;
}
div.menu div[class^="l"]{
width:150px;
text-align:center;
padding:50px 0;
margin:5px;
color:#fff;
font-weight:700;
}
div.menu div:nth-child(1){
background:#1abc9c;
}
div.menu div:nth-child(2){
background:#33ce74;
}
div.menu div:nth-child(3){
background:#3498db;
}
div.menu div:nth-child(4){
background:#9b59b6;
}
div.menu div:nth-child(5){
background:#34495e;
}
div.menu div:nth-child(6){
background:#e67e22;
}
input:checked ~ .menu .l6{
-web-kit-order:1;
order:1;
}